<template>
	<view class="detail-page" :style="isGif==1?'background:none;':''">
		<detail-head type="home" url="../blindBox/blindBox"></detail-head>
		<view class="detail-img">
			<image class="prod-img" :src="detail.pictureUrl" mode="widthFix" v-if="isGif==1"></image>
			<Card :src="detail.pictureUrl" v-if="isGif==-1"></Card>
			<image class="prod-img" src="../../static/img/detail-add.jpg" mode="widthFix" v-if="isGif==1"></image>
		</view>
		<view class="title">
			<text>"</text>
			{{detail.boxName}}
			<text>"</text>
		</view>
		<view class="other">
			<view class="content">
				<view class="label">所属系列</view>
				<view class="value">{{detail.boxName}}</view>
				<view class="more" @click="onToggleMenu(true, 'moreRef')">查看其他盲盒
					<uni-icons custom-prefix="custom-icon" type="forward" color="#FFBD47" size="12"></uni-icons>
				</view>
			</view>
		</view>

		<view class="subtitle">作品描述</view>
		<view class="hint">你可能抽到以下作品中的一个</view>

		<view class="list">
			<view class="item" v-for="item in optData" :key="item.id">
				<view class="left">
					<view class="top">
						<view class="type">{{item.rarityGrade}}</view>
						<text>{{item.name}}</text>
					</view>
					<view class="top">
						<text class="price">￥ {{item.price}}</text>
					</view>
				</view>
				<view class="right">概率：<text>{{(item.percentage*100).toFixed(0)}}%</text></view>
			</view>
		</view>

		<view class="desc">
			<view class="title">细节展示</view>
			<image :src="detail.boxContentUrl" mode="widthFix"></image>
		</view>

		<view class="detail-bay" v-if="detail.id">
			<button type="default" @click="$tool.onConfirmclick(onPayClick)">立即购买 ￥{{detail.price}} </button>
		</view>

		<uni-popup ref="moreRef" type="bottom">
			<view class="popup">
				<view class="title">其他盲盒</view>
				<scroll-view class="otherList" scroll-y="true">
					<view class="item" v-for="item in listData" :key="item.id"
						@click="onToggleMenu(false, 'moreRef'); $tool.navigateTo(`/pages/blindBox/detail?id=${item.id}`)">
						<view class="left">{{item.boxName}}</view>
						<view class="right">{{item.boxStatusName}}</view>
					</view>
					<uni-load-more :contentText="contentText" @clickLoadMore="onClickLoadMore" :status="queryStatus">
					</uni-load-more>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Card from '@/component/detail-card/index.vue'
	import {
		isWeiXin,
		getUserinfo,
		setStringStyle,
		encryptStr,
		objKeySort
	} from '../../utils/utils.js'
	import {
		getOtherBox,
		getBlindBoxDetails
	} from '../../request/blindBox-api.js'
	import {
		createBalancePay
	} from '../../request/common-api.js'
	export default {
		components: {
			Card
		},
		data() {
			return {
				isGif: 0,
				// 详情
				detail: {},
				// 主题数组
				listData: [],
				// 
				optData: [],
				// 列表查询参数
				params: {
					condition: "",
					pageNum: 0,
					pageSize: 6
				},
				// 没有更多了
				isNoMore: false,
				// 加载状态
				queryStatus: 'more',
				// 各状态文字说明
				contentText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		onLoad(oprtion) {
			this.onloadDetail(oprtion.id)
		},
		methods: {
			// popup 切换
			onToggleMenu(show, refName) {
				if (show && this.listData.length === 0) this.onLoadListData()
				this.$tool.popupToggle(show, this, refName, 'bottom')
			},
			// 点击加载更多
			onClickLoadMore() {
				if (!this.isNoMore) {
					this.onLoadListData()
				}
			},
			// 点击购买创建订单
			async onPayClick() {
				uni.showLoading({
					title: "加载中..."
				})
				try {
					let key = ''
					let user = getUserinfo()
					let time = new Date().getTime()
					let nonceStr = parseInt(Math.random() * (1000000000, 10000000000))
					let params = {
						actualPaymentAmount: this.detail.price,
						goodsTitle: this.detail.boxName,
						orderPlatform: isWeiXin() ? 'WECHAT' : 'ALIPAY',
						productId: this.detail.id,
						productType: 'BOX',
						remark: this.detail.boxName,
						nonceStr: nonceStr,
						timestamp: time,
						tradeType: isWeiXin() ? 'JSAPI' : 'MWEB'
					}
					params = objKeySort(params)
					for (let i in params) {
						key += i + '=' + params[i] + '&'
					}
					params.sign = encryptStr(key + 'sign_key')
					let {
						code,
						message,
						data
					} = await createBalancePay(params)
					if (code === 200) {
						this.$tool.navigateTo(`/pages/blindBox/pay?id=${data}&boxid=${this.detail.id}`)
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
					uni.hideLoading()
				} catch (err) {
					uni.hideLoading()
					this.$tool.showErr(err)
				}
			},
			// 加载订单详情
			async onloadDetail(id) {
				try {
					let {
						code,
						message,
						data
					} = await getBlindBoxDetails(id)
					if (code === 200) {
						this.detail = data
						this.optData = data.boxContentVOList
						this.params.condition = this.detail.blindBoxCode
						if (this.detail.pictureUrl.search('.gif') != -1) {
							this.isGif = 1
						} else {
							this.isGif = -1
						}
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
			},
			// 加载 数据
			async onLoadListData() {
				this.queryStatus = 'loading'
				this.params.pageNum += 1
				try {
					let {
						code,
						message,
						data
					} = await getOtherBox(this.params)
					if (code === 200) {
						if (this.params.pageNum <= data.totalPage) {
							this.isNoMore = false
							this.listData.push(...data.list)
							this.queryStatus = 'more'
						} else {
							this.isNoMore = true
							this.queryStatus = 'noMore'
						}
					} else {
						this.queryStatus = 'more'
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.queryStatus = 'more'
					this.$tool.showErr(err)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	$base-img-url:url(@/static/img/detail_under.png);
	$light-img-url:url(@/static/img/under_light.png);

	.detail-page {
		width: 100%;
		min-height: 100vh;
		background: $light-img-url no-repeat;
		background-size: 100% auto;
		background-position: 0 0;
	}

	.detail-img {
		width: 100%;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;

		.prod-img {
			// border-radius: 22px;
			margin-bottom: 40rpx;
			width: 100%;
		}
	}

	.title {
		width: 100%;
		text-align: center;
		font-size: 16px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #9D9D9D;
		margin: 20rpx 0 0 0;

		text {
			color: #FFBD47;
			margin: 0 10rpx;
		}
	}

	.other {
		width: 100%;
		height: 100rpx;
		padding: 0 40rpx;
		margin: 50px 0 120rpx 0;

		.content {
			height: 100%;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(45deg, #1b1b1f, #2E2E2E);
			border-radius: 22rpx;
		}


		.label {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #BFCBCD;
		}

		.value {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #7B7B7B;
		}

		.more {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFBD47;
		}
	}

	.subtitle {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #BFCBCD;
	}

	.hint {
		width: 100%;
		text-align: center;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #8D8D8D;
		margin-bottom: 40rpx;
	}

	.list {
		width: 100%;
		padding: 0 40rpx;

		.item {
			width: 100%;
			height: 168rpx;
			background: #404040;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			margin: 0 0 40rpx 0;

			.left {
				flex: 1;

				.top {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.type {
						padding: 0 10rpx;
						border-radius: 0px 16rpx 0px 16rpx;
						border: 2rpx dashed #FFBD47;
						color: #F5FFA6;
						margin-right: 10rpx;
					}

					text {
						font-size: 14px;
						font-family: SourceHanSansCN-Bold, SourceHanSansCN;
						font-weight: bold;
						color: #BFCBCD;
					}
				}
			}

			.right {
				font-size: 12px;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #BFCBCD;
				margin-top: 20rpx;

				text {
					font-size: 12px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFBD47;
				}
			}
		}
	}

	.desc {
		width: 100%;
		min-height: 200rpx;
		background: $detail-desc-back-url no-repeat;
		background-size: 100% auto;
		background-position: 0 0;
		padding: 0 20rpx;

		.title {
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #7D5B31;
			line-height: 200rpx;
		}

		image {
			width: 100%;
			height: auto;
			min-height: 200rpx;
		}
	}

	.detail-bay {
		width: 100%;
		height: 110rpx;
		position: sticky;
		bottom: 0;

		button {
			width: 684rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #121212;
			box-shadow: -10px -10px 20px 0px rgba(39, 39, 39, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
			border-radius: 22px;
			border: 1px solid #FFBD47;
			font-size: 14px;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #FFBD47;
		}
	}

	.popup {
		width: 100%;
		min-height: 400rpx;
		background: $login-resetbakc-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 40rpx 0 40rpx;

		.title {
			margin-top: 10rpx;
		}

		.otherList {
			width: 100%;
			max-height: 800rpx;
			overflow-x: hidden;
			padding: 0 40rpx;

			.item {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 0 40rpx 0;
				border-bottom: 1px solid #69696A;

				.left {
					font-size: 14px;
					font-family: SourceHanSansCN-Bold, SourceHanSansCN;
					font-weight: bold;
					color: #BFCBCD;
				}

				.right {
					font-size: 12px;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #FFBD47;
					margin-top: 20rpx;

					text {
						font-size: 12px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFBD47;
					}
				}
			}
		}
	}
</style>
